<template>
	<div class="trainFinish train" :class="{active:orderType == 3 || message.isChangedOrder}" v-show="isShow" v-if="message">
		<div class="trainFinish_header">
			<div class="trainFinish_header_bottom" :class="{active:orderType == 3 || message.isChangedOrder}"></div>
			<img src="../../../assets/train/bg2@2x.png" alt="" class="trainFinish_pic"/>
			<div class="trainFinish_return" @click="clickReturn">
				<img src="../../../assets/train/fanhui-baise@2x.png" alt=""/>
			</div>
			<div class="trainFinish_message">
				<img src="http://h5.kpcx179.com/wximages/chupiaoshibai@2x.png" v-if="isFail"/>
				<img src="http://h5.kpcx179.com/wximages/train/chenggong@2x.png" alt="" class="trainFinish_message_pic" v-else/>
				<span v-if="isFail">出票失败~</span>
				<span v-else-if="message.isChangedOrder">改签成功啦~</span>
				<span v-else>支付成功啦~</span>
			</div>
			<div class="trainFinish_btn">
				<div>
					<!--<div @click="cancel">返回首页</div>-->
					<div @click="details">查看订单</div>
					<!--<div class="active" @click="details">查看订单</div>-->
					<div class="active" @click="getReturn">购买返程</div>
				</div>
			</div>	
		</div>
		<div class="trainFinish_rob" v-if="(orderType == 7) && WeChatFlag && !message.isChangedOrder">
			<div class="trainFinish_rob_content">
				<div class="trainFinish_rob_title">正在全力加速中，邀请好友帮加速</div>
				<div class="trainFinish_rob_message">
					<img src="http://h5.kpcx179.com/wximages/train/8@2x.png" alt="" />
				</div>
				<div class="trainFinish_rob_tip">
					分享微信或朋友圈邀请好友为助力
				</div>
				<div class="trainFinish_rob_btn" @click="WeChatFriend">
					<img src="../../../assets/train/weixin@2x.png" alt=""/>
					<img src="../../../assets/train/pengyouquan@2x.png" alt=""/>
				</div>
			</div>
		</div>
		<div v-if="orderType == 3 || message.isChangedOrder" class="trainFinish_banner" @click="toHotel">
			<img src="../../../assets/train/jdbanner@2x.png"/>
		</div>
		<div v-if="orderType == 3 || message.isChangedOrder" class="trainFinish_bottom">
			<div class="trainFinish_bottom_title">
				<span>—</span>
				<div>更多服务</div>
				<span>—</span>
			</div>
			<div class="trainFinish_bottom_content">
				<div @click="toScenic">
					<img src="../../../assets/train/train_scenic.png"/>
					<span>景点</span>
				</div>
				<div @click="toHotel">
					<img src="../../../assets/train/train_hotel.png"/>
					<span>酒店</span>
				</div>
				<div @click="toBus">
					<img src="../../../assets/train/train_bus.png"/>
					<span>汽车</span>
				</div>
				<div @click="toFilm">
					<img src="../../../assets/train/train_film.png"/>
					<span>电影</span>
				</div>
			</div>
		</div>
		<div class="trainFinish_mask" @touchmove.prevent @click="WeChatFriend" v-show="isTrainRobFlag">
			<div class="trainFinish_mask_tip">
				<img src="../../../assets/train/train_tip.png" alt="" />
			</div>
		</div>
	</div>
</template>
<style scoped>
	
	.trainFinish {
		background: #F4F5F9;
		min-height: 100vh;
		padding-bottom: 20px;
	}
	
	.trainFinish.active {
		background: #FFFFFF;
	}
	
	.trainFinish_header {
		width: 100%;
		height: 350px;
		position: relative;
		top: 0;
		left: 0;
		background:linear-gradient(to right,#50C9C3,#0AEECB);
	}
	
	.trainFinish_header_bottom {
		position: absolute;
		bottom: -5px;
		background: #F4F5F9;
		width: 100%;
		height: 60px;
	}
	
	.trainFinish_header_bottom.active {
		background: #fff;
	}
	
	.trainFinish_header > .trainFinish_pic {
		width: 100%;
		height: 261px;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 5;
	}
	
	.trainFinish_header > .trainFinish_return {
		width: 25px;
		height: 44px;
		position: absolute;
		top: 50px;
		left: 30px;
		z-index: 100;
	}
	
	.trainFinish_header > .trainFinish_return > img {
		height: 100%;
		width: 100%;
	}
	
	.trainFinish_message {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 57px;
		color: #ffffff;
		z-index: 10;
	}
	
	.trainFinish_message_pic {
		width: 65px;
		height: 65px;
		margin-right: 24px;
	}
	
	.trainFinish_btn {
		position: absolute;
		left: 0;
		bottom: -43px;
		width: 100%;
		height: 86px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}
	
	.trainFinish_btn > div {
		width: 666px;
		height: 100%;
		background-color: #ffffff;
		box-shadow: 0px 0px 12px 1px rgba(76, 220, 213, 0.2);
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.trainFinish_btn > div > div {
		height: 51px;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32px;
		color: #333333;
	}
	
	.trainFinish_btn > div > div.active {
		color: #3bc3c2;
		border-left: 2px solid #d7d7d7;
	}
	
	.trainFinish_rob {		
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/*background: #F4F5F9;*/
		margin-bottom: 20px;
	}
	
	.trainFinish_rob_content {
		margin-top: 130px;
		width: 666px;
		background: #fff;
		padding: 55px 30px;
		padding-bottom: 20px;
		border-radius: 10px;
		box-sizing: border-box;
	}
	
	.trainFinish_rob_content > div {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainFinish_rob_title {
		font-size:30px;
		color:rgb(85, 85, 85);
	}
	
	.trainFinish_rob_message {
		margin: 50px 0;
		width: 606px;
		height: 418px;
	}
	
	.trainFinish_rob_message > img {
		width: 100%;
		height: 100%;
	}
	
	.trainFinish_rob_tip {
		font-size:30px;
		color:rgb(85, 85, 85);
	}
	
	.trainFinish_rob_content > .trainFinish_rob_btn {
		display: flex;
		justify-content: space-between;
		/*justify-content: center;*/
		align-items: center;
		margin-top: 40px;
		padding: 0 140px;
	}
	
	.trainFinish_rob_content > .trainFinish_rob_btn > img {
		width: 84px;
		height: 84px;
	}
	
	.trainFinish_mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0,0,0,0.75);
		z-index: 300;
	}
	
	.trainFinish_mask_tip {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}
	
	.trainFinish_mask_tip > img {
		width: 566px;
		height: 371px;
		margin-right: 30px;
	}
	
	.trainFinish_banner {
		margin-top: 100px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.trainFinish_banner > img {
		width: 706px;
		height: 454px;
		border-radius: 10px;
	}
	
	.trainFinish_bottom {
		width: 706px;
		margin: 60px auto 0;
		box-sizing: border-box;
		padding: 45px 70px;
		height: 260px;
		background-color: #f4f5f9;
		border-radius: 25px;
	}
	
	.trainFinish_bottom_title {
		font-size: 30px;
		color: #555555;
		display: flex;
		justify-content: center;
	}
	
	.trainFinish_bottom_title > div {
		margin: 0 30px;
	}
	
	.trainFinish_bottom_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 55px;
	}
	
	.trainFinish_bottom_content > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		font-size: 24px;
		color: #000;
	}
	
	.trainFinish_bottom_content > div > img {
		width: 42px;
		margin-bottom: 21px;
	}
</style>
<script>
	import share from "../../../public/share.js";//分享函数
	export default {
		name: "trainFinish",
		data() { //数据
			return {
				outOrderNo:"",//订单号
				orderType:"",//订单类型
				isFail:false,//是否出票失败
				share:null,
				WeChatFlag:false,//微信环境判断
				isShow:false,
				isTrainRobFlag:false,
				message:null,//车次信息
			}
		},
		mounted() {
			this.outOrderNo = this.$route.query.state || this.$route.query.outOrderNo || "";
			this.orderType = this.$route.query.orderType || "3";
			this.share = share;//分享函数
			this.WeChatFlag = this.$publicMethod.WeChatFlag;//微信环境判断
			if (this.$store.state.train.trainStore.isPayOrderNum == this.outOrderNo) { //确定已经支付
				this.getOrderMessage();
			} else {
				var that = this;
				this.WeChatFlag ? this.getOrderMessage() : this.$alert("请使用微信支付", {
					title: '提示',
					yes: {}
				}).then(() => {
					that.wxOrderQuery();
				}).catch(() => {});	
			};
		},
		created() {
			
		},
		methods: {
			getOrderMessage(){ //获取订单详情
				var param = {
					orderNum: this.outOrderNo,
					orderType: this.orderType
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					this.$loading.hide();
					this.isShow = true;
					if(res.data.Code == "0") {
						var message = res.data.Result.trainOrderDetailInfo;
						(this.orderType == 3) && ((message.orderStateCode == "B") && (this.isFail = true));//判断是否出票失败
						if(this.orderType == 7) { //抢票分享
							var str = "我正在抢到" + message.toStation + "的火车票，请求支援！"
							var url = this.$baseUrl.domainName + '/trainRobShare?userId=' + this.$store.state.common.userinfo.userID + "&orderNum=" + this.outOrderNo;
							this.share(str, str, "http://h5.kpcx179.com/wximages/train/8@2x.png", url);
						};
						var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
						trainStore.isPayOrderNum = this.outOrderNo;
						this.$store.commit('TRAINSTORE', trainStore);
						this.message = message;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			clickReturn(){
				this.$router.push({//跳转
					name:"index",
				});
			},
			cancel(){ //返回首页
				this.$router.push({//跳转
					name:"index",
				});
			},
			details(){ //查看订单
				this.$router.push({//跳转
					name:"allOrder",
					query:{
						'order':'order'
					}
				});
			},
			getReturn(){
				this.$router.push({
					name: 'trainList',
					query: {
						fromCity: this.message.fromStation,
						toCity: this.message.toStation,
						departureDate: new Date().format('yyyy-MM-dd'),
						Highspeed:0,
						studentFlag:0
					},
				});
			},
//			WeChatFriendCircle(){ //盆友圈
//				
//			},
			WeChatFriend(){ //微信好友
				this.isTrainRobFlag = !this.isTrainRobFlag;
			},
			wxOrderQuery(){ //微信订单查询
				this.$loading.show();
				var param = {
					flag:"12",
					openid:"",
					out_trade_no:this.outOrderNo,
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/create/wxOrderQuery", param).then((res) => {
					this.$loading.hide();
					(res.data.Code == "0") ? ((res.data.Result.trade_state == "SUCCESS") ? this.getOrderMessage() : this.goBack()) : this.$toast(res.data.msg, {
						durtaion: 200,
						location: 'center',
					});
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			goBack(){//返回支付页
				this.$toast('支付取消');
				var timer = setTimeout(function(){
					this.$router.go(-2);
					clearTimeout(timer);
				}.bind(this),500);
			},
			toHotel(){//去酒店
				this.$router.push({
					name: 'hotelIndex',
				});
			},
			toBus(){//去汽车
				this.$router.push({
					name: 'carIndex',
				});
			},
			toScenic(){//去景区
				this.$router.push({
					name:'scenicname',
				});
			},
			toFilm(){//去电影
				this.$router.push({
					path:'/index/film',
				});
			}
		},
		beforeDestroy(){},
		components: {
			
		},
	};
</script>